<script setup lang="ts">
import type { NavsList, TabList, TypeArticle } from '@/types/consult'
import { ref } from 'vue'
import articleList from './components/ArticleList.vue'
import RecommendList from './components/RecommendList.vue'
import { useConsultStore } from '@/stores'

const navsList = ref<NavsList[]>([
  {
    title: '问医生',
    tip: '按科室查询医生',
    icon: 'home-doctor',
    path: 'home'
  },
  {
    title: '极速问诊',
    tip: '20s医生极速回复',
    icon: 'home-graphic',
    path: 'faseConsult'
  },
  {
    title: '开药门诊',
    tip: '线上买药更方便',
    icon: 'home-prescribe',
    path: 'home'
  }
])
const navsListFoot = ref<NavsList[]>([
  { title: '药品订单', icon: 'home-order', path: 'home' },
  { title: '健康档案', icon: 'home-docs', path: 'patient' },
  { title: '我的处方', icon: 'home-rp', path: 'home' },
  { title: '疾病查询', icon: 'home-find', path: 'home' }
])
const imagePath = '../../assets/ad.png'
// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href
const images = [imgUrl, imgUrl]
const tabList = ref<TabList[]>([
  { title: '关注', type: 'like' },
  { title: '推荐', type: 'recommend' },
  { title: '减脂', type: 'fatReduction' },
  { title: '饮食', type: 'food' }
])
const activeName = ref<TypeArticle>('recommend')
// 问诊类型
const consult = useConsultStore()
</script>

<template>
  <div class="Home-page">
    <div class="home-header">
      <h1>优医</h1>
      <div class="search">
        <van-icon name="search" size="16" />
        <span class="placeholder">搜一搜：疾病/症状/医生/健康知识</span>
      </div>
    </div>
    <div class="home-navs">
      <van-row class="navs">
        <van-col v-for="(item, index) in navsList" :key="index" :span="8">
          <router-link
            :to="{ name: `${item.path}` as string}"
            class="navs-item"
            @click="consult.setType(index + 1)"
          >
            <DP-icon :size="40" :name="item.icon"></DP-icon>
            <h6>{{ item.title }}</h6>
            <p>{{ item.tip }}</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row class="navs">
        <van-col v-for="(item, index) in navsListFoot" :key="index" :span="6">
          <router-link
            :to="{ name: `${item.path}` as string}"
            class="navs-item navs-foot"
          >
            <DP-icon :size="30" :name="item.icon"></DP-icon>
            <h6>{{ item.title }}</h6>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <div class="home-swiper">
      <van-swipe class="my-swipe" show-indicators indicator-color="#fff">
        <van-swipe-item v-for="(imgUrl, index) in images" :key="index">
          <img :src="imgUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="home-tab">
      <van-tabs sticky shrink v-model:active="activeName">
        <van-tab
          :title="item.title"
          v-for="(item, index) in tabList"
          :key="index"
          :name="item.type"
        >
          <RecommendList v-if="item.title === '关注'"></RecommendList>
          <article-list :type="item.type"></article-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Home-page {
  margin-bottom: 50px;
  .home-header {
    position: relative;
    height: 100px;
    h1 {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      padding: 15px;
    }
    .search {
      display: flex;
      align-items: center;
      padding-left: 15px;
      margin: 0 15px;
      background-color: #fff;
      height: 40px;
      border-radius: 20px;
      font-size: 13px;
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
      color: #999;
      .placeholder {
        margin-left: 10px;
      }
    }
    &::before {
      position: absolute;
      content: '';
      height: 90px;
      top: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
      border-bottom-left-radius: 150px 20px;
      border-bottom-right-radius: 150px 20px;
      z-index: -1;
    }
  }
  .home-navs {
    .navs {
      margin-top: 15px;
      .navs-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        h6 {
          font-size: 14px;
          font-weight: 500;
          margin: 4px 0;
        }
        p {
          font-size: 11px;
          color: var(--cp-tag);
        }
      }
      .navs-foot {
        h6 {
          font-weight: 400;
          font-size: 12px;
        }
      }
    }
  }
  .home-swiper {
    margin-top: 15px;
    .my-swipe {
      .van-swipe-item {
        padding: 0 15px;
        box-sizing: border-box;
        img {
          width: 100%;
        }
      }
    }
  }
  ::v-deep() {
    .van-tab__panel {
      height: 90vh;
      overflow-y: auto;
    }
  }
}
</style>
